<template>
    <div class="comtainer">
        <el-form>
            <el-form-item label="壁纸分类">
                <el-select v-model="selectedId" placeholder="请选择" size="small" @change="changeClassify">
                    <el-option v-for="item in classifyList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-row>
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-for="item in wallpaperList" :key="item.id">
                <div class="img-con">
                    <img :src="item.img_1024_768" />
                    <div class="download">
                        <el-link type="primary" :href="item.img_1024_768" target="_blank">1024*768</el-link>
                        <el-link type="primary" :href="item.img_1280_1024" target="_blank">1280*1024</el-link>
                        <el-link type="primary" :href="item.img_1280_800" target="_blank">1280*800</el-link>
                        <el-link type="primary" :href="item.img_1366_768" target="_blank">1366*768</el-link>
                        <el-link type="primary" :href="item.img_1440_900" target="_blank">1440*900</el-link>
                        <el-link type="primary" :href="item.img_1600_900" target="_blank">1600*900</el-link>
                    </div>
                </div>
            </el-col>
            <el-col id="imgBottom"></el-col>
        </el-row>
    </div>
    <el-backtop></el-backtop>
</template>

<script>
import { get } from '../../request'
import { wallpaper } from '../../request/api'
import $ from 'jquery'
import lodash from 'lodash'

export default {
    data() {
        return {
            classifyList: [], //分类
            wallpaperList: [], //图片列表

            selectedId: '', //当前分类
            start: 0,
            count: 12,
        }
    },

    created() {
        this.init()
    },

    mounted() {
        window.addEventListener('scroll', lodash.throttle(this.handleScroll, 300))
    },

    methods: {
        //初始化
        async init() {
            const { data } = await wallpaper.getClassifyList()

            this.classifyList = data
            this.selectedId = this.$route.params.id || this.classifyList[0].id

            this.updataList(this.selectedId)
        },

        //更新列表
        async updataList(cid, start = 0, count = 12) {
            const { data } = await wallpaper.getList({ cid, start, count })
            this.wallpaperList = [...this.wallpaperList, ...data]
        },

        //切换分类
        changeClassify(item) {
            this.$router.push({ path: `/wallpaper/${item}` })
            this.wallpaperList = []
            this.updataList(item, this.start, this.count)
        },

        handleScroll() {
            if ($(document).scrollTop() + $(window).height() > $(document).height() - 500) {
                this.start += this.count
                this.updataList(this.selectedId, this.start)
            }
        },
    },
}
</script>

<style lang="less" scoped>
.comtainer {
    > .el-form {
        padding: 10px;

        .el-form-item {
            margin: 0;
        }
    }

    > .el-row {
        font-size: 0;
        overflow: hidden;

        .img-con {
            position: relative;

            &:hover .download {
                visibility: visible;
                cursor: pointer;
            }

            .download {
                visibility: hidden;
                font-size: 16px;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                background: rgba(0, 0, 0, 0.5);

                .el-link {
                    line-height: 2;
                }
            }
        }
    }
}

img {
    width: 100%;
}
</style>
